<template>
  <section>
      <template v-if="hasFetch">
        <product-create v-if="!is1688 && !isJd" :formData.sync="createForm" @cancelCreate="cancel" @okCreate="ok" />
        <template v-else-if="isJd">
            <div class="filter-container">
                <el-select @change="handleJdFilter" size="mini" v-model="currentJdId" clearable placeholder="商品池" clearble>
                    <el-option
                            v-for="item in jdGroupList"
                            :key="item.page_num"
                            :label="item.name"
                            :value="item.page_num">
                    </el-option>
                </el-select>
                <el-button v-if="jdHasMore" size="mini" class="ml10" @click="loadJdMore" type="primary">下一页</el-button>
            </div>
            <el-table :height="tableHeight"
                        :data="jdList"
                        style="width: 100%"
                        v-el-table-infinite-scroll="loadJdMore"
                        v-loading="listLoading">
                    <el-table-column align="left" label="" width="140">
                        <template slot-scope="scope">
                            <span><img :src="scope.row.thumb" style="width:80px;" /></span>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" label="商品">
                        <template slot-scope="scope">
                            <span>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="商品状态" >
                        <template slot-scope="scope">
                            <span>{{scope.row.state == 1 ? '上架' : '下架'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="right" label="价格" >
                        <template slot-scope="scope">
                            <span>￥{{scope.row.price}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="right" label="京东价格" >
                        <template slot-scope="scope">
                            <span>￥{{scope.row.jdPrice}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" >
                        <template slot-scope="scope">
                            <span>
                                <el-button v-if="!scope.row.productId" size="mini" type="primary" @click="handleJdCheck(scope.row)">选品入库</el-button>
                                <el-button v-else size="mini" type="white" @click="handleDetail(scope.row)">查看商品</el-button>
                            </span>
                        </template>
                    </el-table-column>
            </el-table>
        </template>
      
        <template v-else>
            <div class="filter-container">
                <!-- <el-select @change="handleFilter" size="mini" v-model="currentId" clearable placeholder="选品库" clearble>
                    <el-option
                            v-for="item in groupList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select> -->
                   <el-select  size="mini" v-model="listQuery.postCategoryId" clearable placeholder="分类" clearble>
                    <el-option
                            v-for="item in fenleiList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
           
                <!-- <el-form-item label="分类：" prop="postCategoryId" v-if="type==0">
                        <el-radio-group v-model="listQuery.postCategoryId">
                            <el-radio v-for="item in fenleiList" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                <common-input @keyup.enter.native="handleFilter" class="w200 ml10" placeholder="商品关键字" v-model="listQuery.keyWords" />
                <el-button size="mini" class="ml10" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
                <!-- <el-button size="mini" class="ml10" @click="handleGroupSync" type="primary">同步选品库</el-button>
                <el-button v-if="currentId>0" size="mini" class="ml10" @click="handleGoods" type="primary">同步选品库商品</el-button> -->
            </div>
            <el-table :height="tableHeight"
                        :data="list"
                        style="width: 100%">
                    <el-table-column align="left" label="" width="140">
                        <template slot-scope="scope">
                            <span><img :src="scope.row.imgUrl" style="width:80px;" /></span>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" label="商品">
                        <template slot-scope="scope">
                            <span>{{scope.row.title}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="商品状态" >
                        <template slot-scope="scope">
                            <span>{{scope.row.invalid == 1 ? '失效' : '有效'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="right" label="价格" >
                        <template slot-scope="scope">
                            <span>￥{{scope.row.currentPrice}}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column align="left" label="渠道专属价" >
                        <template slot-scope="scope">
                            <span>￥{{scope.row.channelPrice}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column align="center" label="添加时间" >
                        <template slot-scope="scope">
                            <span>{{scope.row.createdAt}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" >
                        <template slot-scope="scope">
                            <span>
                                <el-button v-if="!scope.row.productId" size="mini" type="primary" @click="handleCheck(scope.row)">选品入库</el-button>
                                <el-button v-else size="mini" type="white" @click="handleDetail(scope.row)">查看商品</el-button>
                            </span>
                        </template>
                    </el-table-column>
            </el-table>
                <div v-show="!listLoading" class="pagination-container">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
                </div>
        </template>
      </template>
  </section>
</template>

<script>
    import {
        alibaba_group_sync,
        alibaba_goods_list,
        alibaba_goods_sync,
        alibaba_group,
        alibaba_goods_detail_sync
    } from '../../api/alibaba';
    import {
        jd_group,
        jd_goods_list
    } from '../../api/jd';
    import {
        agency_is1688,
        agency_isJd
    } from '../../api/agency';
    export default {
        components: {
            'product-create': () => import('../../components/Product/create'),
        },
        data() {
            return {
                tableHeight: 200,
                createForm: {
                    product_id: 0
                },
                hasFetch: false,
                is1688: false,
                isJd: false,
                list: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    pageSize: 20,
                    keyWords: undefined,
                    postCategoryId:undefined
                },
                jdListQuery: {
                    pageSize: 20,
                    offset: 0,
                },
                fenleiList: [
                    {
                        value: 4,
                        label: '纺织、皮革'
                    },
                    {
                        value: 5,
                        label: '电工电气'
                    },
                    {
                        value: 10,
                        label: '能源'
                    },
                    {
                        value: 12,
                        label: '交通运输'
                    },
                    {
                        value: 1813,
                        label: '玩具'
                    },
                    {
                        value: 17,
                        label: '工艺品、礼品'
                    },
                    {
                        value: 57,
                        label: '电子元器件'
                    },
                    {
                        value: 58,
                        label: '照明工业'
                    },
                    {
                        value: 66,
                        label: '医药、保养'
                    },
                    {
                        value: 67,
                        label: '办公、文教'
                    },
                    {
                        value: 96,
                        label: '家纺家饰'
                    },
                    {
                        value: 311,
                        label: '童装'
                    },
                    {
                        value: 312,
                        label: '内衣'
                    },
                    {
                        value: 10165,
                        label: '男装'
                    },
                    {
                        value: 1038378,
                        label: '鞋'
                    },
                    {
                        value: 1042954,
                        label: '箱包皮具'
                    },
                    {
                        value: 127380009,
                        label: '运动服饰'
                    },
                    {
                        value: 130822002,
                        label: '餐饮生鲜'
                    },
                    {
                        value: 130823000,
                        label: '性保健品'
                    },
                    {
                        value: 200514001,
                        label: '床上用品'
                    },
                    {
                        value: 2,
                        label: '食品酒水'
                    },
                    {
                        value: 7,
                        label: '数码、电脑'
                    },
                    {
                        value: 15,
                        label: '日用百货'
                    },
                    {
                        value: 96,
                        label: '家居饰品'
                    },
                    {
                        value: 97,
                        label: '美容护肤/彩妆'
                    },
                    {
                        value: 1501,
                        label: '母婴用品'
                    },
                    {
                        value: 10166,
                        label: '女装'
                    },
                    {
                        value: 122916001,
                        label: '宠物及园艺'
                    },
                    {
                        value: 130822220,
                        label: '个护/家清'
                    },
                    {
                        value: 6,
                        label: '家用电器'
                    },
                    {
                        value: 13,
                        label: '家装、建材'
                    },
                    {
                        value: 43472,
                        label: '毛巾、巾类'
                    },
                    {
                        value: 122916002,
                        label: '汽车用品'
                    }
                ],
                total: null,
                activeName: '2',
                currentId: 0,
                groupList: [],
                jdGroupList: [],
                currentJdId: undefined,
                jdList: [],
                jdHasMore: false,
            };
        },
        mounted() {
            const that = this

            window.onresize = () => {

                return (() => {

                    that._getTableHeight()

                })()
            }
        },
        created() {
            if(this.$route.query.pageNum) {
                this.listQuery.page = parseInt(this.$route.query.pageNum);

                if(!this.listQuery.page) {
                    this.listQuery.page = 1;
                }
            }
            this._getTableHeight();
            agency_is1688().then((res)=>{
                this.is1688 = res.data == "1";
                this.hasFetch = true;

                if(this.is1688) {
                    if(this.$route.query.groupId) {
                        this.currentId = parseInt(this.$route.query.groupId);
                    }
                    // this.currentId = parseInt(this.$route.query.id);
                    if(!this.currentId || isNaN(this.currentId)) {
                        this.currentId = undefined;
                    }
                    this.getList();
                    this.getGroupList();
                } else {
                    agency_isJd().then((res2)=>{
                        this.isJd = res2.data == "1";
                        this.hasFetch = true;

                        if(this.isJd) {
                            this.getJdGroupList();
                            // if(this.$route.query.groupId) {
                            //     this.currentId = parseInt(this.$route.query.groupId);
                            // }
                            // // this.currentId = parseInt(this.$route.query.id);
                            // if(!this.currentId || isNaN(this.currentId)) {
                            //     this.currentId = undefined;
                            // }
                            // this.getList();
                            // this.getGroupList();
                        }
                    }).catch((err)=>{

                    })
                }
            }).catch((err)=>{

            })
        },

        methods: {
            _getTableHeight() {
                this.tableHeight = window.innerHeight - 180
            },
            cancel() {
                this.$router.push({path: '/goods_create'});
            },
            ok() {
                this.$router.push({path: '/goods_create'});
            },
            handleGroupSync() {
                this.$confirm('确定同步选品库?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        alibaba_group_sync()
                            .then(() => {
                                this.$message.success("选品库已同步");
                                this.getGroupList();
                            });
                    }).catch(()=>{});
            },
            getGroupList() {
                alibaba_group().then(response => {
                    this.groupList = response.data;
                })
            },
            getJdGroupList() {
                jd_group().then(response => {
                    this.jdGroupList = response.data;
                    this.currentJdId = this.jdGroupList[0].page_num;

                    this.getJdList();
                })
            },
            handleGoods() {
                this.$confirm('确定同步商品?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        alibaba_goods_sync(this.currentId)
                            .then(() => {
                                this.$message.success("商品已同步");
                                this.handleFilter();
                            });
                    }).catch(()=>{});
            },
            getList() {
                this.listLoading = true;
                alibaba_goods_list(this.currentId, this.listQuery).then(response => {
                    this.list = response.data.list;
                    this.total = response.data.total;
                    this.listLoading = false;
                })
            },
            getJdList() {
                this.listLoading = true;
                jd_goods_list(this.currentJdId, this.jdListQuery).then(response => {
                    this.jdListQuery.offset = response.data.offset;

                    this.jdList = this.jdList.concat(response.data.products);
                    this.jdHasMore = response.data.remainPage > 0;
                    // this.total = response.data.total;
                    this.listLoading = false;
                })
            },
            handleFilter() {
                this.listQuery.page = 1;
                this.getList();
            },
            handleJdFilter() {
                this.jdListQuery.offset = 0;
                this.getJdList();
            },
            handleSizeChange(val) {
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.getList();
            },
            handleClick(tab, event) {
                this.listQuery.auditStatus = this.activeName;
                this.handleFilter();
            // console.log(this.activeName)
            },
            leaveTab(activeName, oldActiveName) {
            // console.log(activeName)
            // return false;
            },
            handleUpdate(row) {
                this.$router.push("/goods_edit?id=" + row.id + "&from=" + encodeURIComponent("goods_submit")) 
            },
            handleSubmit(row) {
                this.$confirm('此操作将提交商品审核, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        product_submit(row.id)
                            .then(() => {
                                this.$message.success("商品已提交审核");
                                this.getList();
                            });
                    }).catch(()=>{});
                
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        product_delete([row.id])
                            .then(() => {
                                this.$message.success("商品删除成功");
                                this.getList();
                            });
                    }).catch(()=>{});
            },
            handleCheck(row) {
                alibaba_goods_detail_sync(row.offerId).then((res)=>{
                    this.$router.push("/alibaba_submit?id=" + row.offerId + "&from=" + encodeURIComponent("goods_submit?groupId=" + (this.currentId ? this.currentId : '') + "&pageNum=" + this.listQuery.page)) 
                }).catch((err)=>{

                })
            },
            handleJdCheck(row) {
                let {href} = this.$router.resolve({path: '/jd_submit?id=' + row.sku});
                window.open(href, '_blank');
            },
            handleDetail(row) {
                let {href} = this.$router.resolve({path: '/goods_detail?id=' + row.productId});
                window.open(href, '_blank');
            },
            loadJdMore() {
                if(this.jdHasMore && !this.listLoading) {
                    this.getJdList();
                }
            }
        }
    };
</script>
